<template>
  <div class="center py-6" ref="root">
    <van-loading
      :size="`${14 / 36}rem`"
      type="spinner"
      v-if="status === 'loading'"
    ></van-loading>
    <div class="text-size-14 font-weight-500 color-[#DFDFDF] ml-6px">
      {{ text }}
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "LoadMore"
});
const props: any = defineProps({
  status: {
    type: String,
    default: "nomore"
  },
  loadingText: {
    type: String,
    default: "loading..."
  }, // 加载中文案
  nomoreText: {
    type: String,
    default: "nomore"
  }, // 没有更多了文案
  loadmoreText: {
    type: String,
    default: "loadmore"
  } // 加载更多文案
});
const emits = defineEmits(["loadmore"]);
const text = computed(() => props[`${props.status}Text`]);
const root = ref<HTMLElement | null>(null);
const oberver = ref<any>(null);
onMounted(() => {
  oberver.value = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting) {
        emits("loadmore"); // 触发加载更多事件
      }
    },
    {
      root: null,
      // rootMargin: 0,
      threshold: 0.1
    }
  );
  unref(oberver).observe(unref(root));
});
onUnmounted(() => {
  unref(oberver).disconnect();
});
defineExpose({
  root
});
</script>
